<template>
  <div class="homePage common-layout">
    <el-container>
      <el-aside width="220px">
        <div class="top">
          图标占位区
        </div>
        <div class="middle">
          <div class="middleItem" v-for="(item,outindex) in elAsideData" :key="item.id">
            <div class="title">{{ item.title }}</div>
            <div class="inItem" @click="homePage" v-if="outindex == 0">
              <div class="inIcon">
                <el-icon><HomeFilled /></el-icon>
              </div>
              <div class="inTitle">首页</div>
            </div>
            <div class="inItem " v-for="(inItem, index) in item.children" :key="index" @click="changePage(index)">
              <div class="inIcon">{{ inItem.icon }}</div>
              <div class="inTitle">{{ inItem.title }}</div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <el-icon @click="changeExpand">
            <Fold />
          </el-icon>
        </div>

      </el-aside>
      <el-container>
        <el-main>
          <div class="search">
            <el-input v-model="input1" placeholder="输入搜索内容">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <search />
                </el-icon>
              </template>
            </el-input>
            <div class="headpic">
              头像信息
            </div>
          </div>
          <div class="maincontainer">
            <KeepAlive>
              <router-view #default = {Component}>
                <transition :enter-active-class="`animate__animated  animate__fadeInLeft`" :leave-active-class="`animate__animated animate__fadeOutRight`">
                    <component :is="Component"></component>
                </transition>
              </router-view>
            </KeepAlive>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup lang='ts'>
import "animate.css";
import "element-plus/theme-chalk/display.css";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router"

let input1 = ref<string>()

const router = useRouter()

//跳转到主页

const homePage = ()=>{
  router.push({
    path:"/"
  })
}

//跳转路由
const changePage = (index: number) => {
  // Code logic here
  if (index == 0) {
    router.push({
      path: '/page1',
      query:{
            name:"zhouck-query",
            age:12
        }
    })
  }else{
    router.push({
      path: '/page2'
    })
  }

}

const changeExpand = () => {
  console.log("hahah")
}



//栏目数据
let elAsideData = reactive([
  {
    title: "栏目1",
    id: 0,
    children: [
      {
        icon: "",
        title: "内容1"
      },
      {
        icon: "",
        title: "内容2"
      }
    ]

  },
  {
    title: "栏目2",
    id: 1,
    children: [
      {
        icon: "",
        title: "内容1"
      },
      {
        icon: "",
        title: "内容2"
      },
      {
        icon: "",
        title: "内容3"
      }
    ]

  }
])


</script>

<style scoped lang="scss">
.homePage {
  width: 100%;
  height: 100%;

  .el-container {
    height: 100%;

    .el-aside {
      display: flex;
      flex-direction: column;
      padding: 10px 0px;
      box-sizing: border-box;

      .top {
        margin: auto;
        padding: 20px;
      }

      .middle {
        flex: 1;
        padding: 10px;
        box-sizing: border-box;

        .middleItem {
          .title {
            font-size: 14px;
            font-weight: 500;
            box-sizing: border-box;
            padding: 10px;
          }

          .inItem {
            box-sizing: border-box;
            padding: 10px 20px;
            display: flex;
            color: #9e9e9e;
            &:hover {
              background-color: #f5f5f5;
              border-radius: 10px;
            }

            .inTitle {
              font-size: 15px;
              font-weight: 600;
              
              padding: 0 10px;
            }
          }
        }
      }

      .bottom {
        border-top: 1px solid #e6e3e3;
        padding: 10px;
        padding-bottom: 0px;
        box-sizing: border-box;
        text-align: center;
        font-size: 22px;
        line-height: 10px;
        color: #7c7b7b;

      }
    }

    .el-main {
      background-color: #e9e8e8;
      display: flex;
      flex-direction: column;
      padding: 10px;

      .search {
        display: flex;
        justify-content: space-between;

        .el-input {
          width: 50%;
        }
      }

      .maincontainer {
        position: relative;
        overflow: hidden;
        background-color: #ffffff;
        margin-top: 12px;
        border-radius: 10px;
        flex: 1;
        div:first-child{
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
        }
      }
    }
  }
}
</style>